<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="baidu-site-verification" content="mQzDYq8fHL" />
    <meta name="keywords" content="云钢联合,废旧、二手、废钢、二手设备、闲置设备拆除、废料、废电缆、废电机、报废车辆">
    <meta name="description" content="云钢联合,废钢材、冶金设备、废铜套、招标、拍卖、钢厂废旧物资、废旧次材、整厂拆除">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>闲置处置详情</title>
    <link href="css/base.css" rel="stylesheet" type="text/css"/>
    <link href="css/css.css" rel="stylesheet" type="text/css"/>
    <link href="css/style1.css" rel="stylesheet" type="text/css"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.simpleGal.js"></script>
    <script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <style>
        img {
            max-width: none;
        }

        .tb-pic a {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .tb-pic a img {
            vertical-align: middle;
            width: 100%;
            height: 100%;
        }

        .tb-pic a {
            *display: block;
            *font-family: Arial;
            *line-height: 1;
        }

        .tb-thumb {
            margin: 10px 0 0;
            overflow: hidden;
        }

        .tb-thumb li {
            float: left;
            width: 86px;
            height: 86px;
            overflow: hidden;
            border: 1px solid #cdcdcd;
            margin-right: 5px;
        }

        .tb-thumb li:hover, .tb-thumb .tb-selected {
            width: 84px;
            height: 84px;
            border: 2px solid #3A7ACD;
        }

        .tb-s310, .tb-s310 a {
            height: 365px;
            width: 365px;
        }

        .tb-s310, .tb-s310 img {
            max-height: 365px;
            max-width: 365px;
        }

        .tb-booth {
            border: 1px solid #CDCDCD;
            position: relative;
            z-index: 1;
        }

        div.zoomDiv {
            z-index: 999;
            position: absolute;
            top: 0px;
            left: 0px;
            background: #ffffff;
            border: 1px solid #ccc;
            display: none;
            overflow: hidden;
        }

        div.zoomMask {
            position: absolute;
            background: url("images/mask.png") repeat;
            cursor: move;
            z-index: 1;
        }

        <!--
        弹出隐藏层-- >
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 1200px;
            background-color: black;
            z-index: 9999;
            -moz-opacity: 0.4;
            opacity: 0.40;
            filter: alpha(opacity=40);
        }

        .white_content {
            display: none;
            position: absolute;
            top: 20%;
            left: 40%;
            width: 400px;
            height: 175px;
            border: none;
            background-color: white;
            z-index: 100200;
            overflow: auto;
        }

        .white_content_small {
            display: none;
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

        .dialogbox {
            padding: 20px;
            line-height: 40px;
        }

        .addbtn {
            width: 22px;
            height: 22px;
            background: url(images/close2.png) no-repeat;
            margin-right: 5px;
            margin-top: 3px;
            border: none;
            float: right;
        }
    </style>
</head>

<body>

<!--头部导航-->
<div class="nofix_head">
    <div class="top wrapper">
        <div class="float-lt margin-b10">
            <ul>
                <li><a href="login.html" target="_blank" class=" colororange unlogin">请登录</a></li>
                <li><a href="register.html" target="_blank" class="unlogin">免费注册</a></li>
                <li><a href="JavaScript:void (0)">欢迎使用云钢综合平台</a></li>
            </ul>
        </div>
        <div class="float-rt">
            <ul>
                <li><a href="index.html" target="_blank">首页</a></li>
                <!--<li><a href="javascript:void (0)">我要处置</a></li>-->
                <!--<li><a href="javascript:void (0)">我要求购</a></li>-->
                <li><a href="user.html">个人中心</a></li>
            </ul>
        </div>
    </div>
</div>
<!--头部导航END-->

<div class="clear">&nbsp;</div>

<!--网站头部-->
<div class="sup-wid">
    <div class="supplie-top">
        <div class="clear">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
                <!--<tr>-->
                <!--<td align="center"><a href="javascript:void (0)">供应商首页</a></td>-->
                <!--<td align="center"><a href="javascript:void (0)">全部产品</a></td>-->
                <!--<td align="center"><a href="javascript:void (0)">企业介绍</a></td>-->
                <!--<td align="center"><a href="javascript:void (0)">最新产品</a></td>-->
                <!--<td align="center"><a href="javascript:void (0)">热销产品</a></td>-->
                <!--<td align="center"><a href="javascript:void (0)">促销产品</a></td>-->
                <!--</tr>-->
            </table>
        </div>
        <div class=" clear bread"><a href="index.html">首页</a> <span class="pipe">&gt;</span> <a href="extraList.html">闲置中心</a>
            <span class="pipe">&gt;</span> <a href="javascript:void (0)" class="product_body">详情</a></div>
    </div>
    <div class="pro_detail" id="Details" v-cloak>
        <div class="pro_detail_img float-lt">
            <div class="gallery">
                <div class="tb-booth tb-pic tb-s310"><a :href="data.thumbnail" target="_blank"><img :src="data.thumbnail"
                                                                                  alt="云钢联合,闲置设备" :rel="data.thumbnail"
                                                                                  /></a></div>
                <!--<ul class="tb-thumb">-->
                    <!--<li class="tb-selected">-->
                        <!--<div class="tb-pic tb-s40"><a href="javascript:void (0)"><img src="images/01_small.jpg" mid="images/01_mid.jpg"-->
                                                                    <!--big="images/01.jpg"></a></div>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<div class="tb-pic tb-s40"><a href="javascript:void (0)"><img src="images/02_small.jpg" mid="images/02_mid.jpg"-->
                                                                    <!--big="images/02.jpg"></a></div>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<div class="tb-pic tb-s40"><a href="javascript:void (0)"><img src="images/03_small.jpg" mid="images/03_mid.jpg"-->
                                                                    <!--big="images/03.jpg"></a></div>-->
                    <!--</li>-->
                    <!--<li style="margin-right:0px;">-->
                        <!--<div class="tb-pic tb-s40"><a href="javascript:void (0)"><img src="images/04_small.jpg" mid="images/04_mid.jpg"-->
                                                                    <!--big="images/04.jpg"></a></div>-->
                    <!--</li>-->
                <!--</ul>-->
            </div>
            <input type="button" value="加入收藏" id="h1" class="addcart" onclick="collect(this)" :id="data.id"/>
        </div>

        <div class="float-lt pro_detail_con">
            <div class="pro_detail_tit">物资名称：{{data.substanceName}}</div>
            <div class="pro_detail_ad">商家：{{data.enterpriseName}}</div>
            <div class="pro_detail_price  margin-t20"><span class="margin-r20">项目编号：{{data.projectCode}}</span></div>
            <div class="pro_detail_price  margin-t20"><span class="margin-r20">物资类别：{{data.typeName}}</span></div>
            <div class="pro_detail_price  margin-t20"><span class="margin-r20">招标形式：{{data.biddingName}}</span></div>
            <div class="pro_detail_price  margin-t20"><span class="margin-r20" style="width: 100%">招标期限：{{data.beginAt}}~{{data.endAt}}</span></div>
            <div class="pro_detail_price  margin-t20"><span class="margin-r20">刷新时间：{{data.refreshAt}}</span></div>
            <div class="clear"></div>
            <div class="pro_detail_act margin-t20 fl"><span class="margin-r20">标的总价(预估)</span><span
                    style="font-size:26px; font-weight:bold; color:#dd514c;">￥{{data.totalPrices}}万</span></div>
            <div class="clear"></div>
            <div class="pro_detail_number margin-t20">
                <div class="margin-r20 float-lt">浏览数：<span class="colorred"><strong>{{data.pageView}}</strong></span></div>
                <div class="margin-r20 float-lt">收藏数：<span class="colorred"><strong>{{data.collection}}</strong></span></div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <div class="pro_detail_btn margin-t30">
                <ul>
                    <li class="pro_detail_shop"><a @click="callMe">联系卖家看货</a></li>
                    <li class="pro_detail_add"><a :href="['factoryDetails.html?id='+data.enterpriseId]">查看卖家店铺</a></li>
                </ul>
            </div>
        </div>

        <el-dialog
            title="查看联系方式"
            :visible.sync="contactModalVisibility"
            width="30%"
            :before-close="handleClose">
            <div>
                <p>
                联系人：{{contact.name}}
                </p>
                <p>
                联系电话：{{contact.cellphone}}
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="contactModalVisibility = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <div class="clear"></div>
    <div class="pro_con margin-t55" style="overflow:hidden;">
        <div class="pro_tab">
            <ul>
                <li class="cur">拼盘详情</li>
                <li>图片清单</li>
            </ul>
        </div>
        <div class="conlist">
            <div class="conbox" style="display:block;">
                <div class="clear">
                    <table width="100%" border="0" cellpadding="0" class="details-table" cellspacing="0" id="dishList"
                           v-cloak>
                        <tr>
                            <th align="center"><a href="javascript:void (0)">序号</a></th>
                            <th align="center"><a href="javascript:void (0)">物资名称</a></th>
                            <th align="center"><a href="javascript:void (0)">规格型号</a></th>
                            <th align="center"><a href="javascript:void (0)">材质</a></th>
                            <th align="center"><a href="javascript:void (0)">估重</a></th>
                            <th align="center"><a href="javascript:void (0)">单位</a></th>
                            <th align="center"><a href="javascript:void (0)">备注</a></th>
                        </tr>
                        <tr v-for="(item, index) in data">
                            <td>{{index+1}}</td>
                            <td>{{item.substanceName}}</td>
                            <td>{{item.projectSpecification}}</td>
                            <td>{{item.texture}}</td>
                            <td>{{item.revaluation}}</td>
                            <td>{{item.unit}}</td>
                            <td>{{item.remark}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="conbox">
                <button onclick="downloadFile()" style="margin-bottom: 20px">下载附件</button>
                <ul id="thumblist" v-cloak>
                    <li  v-for="(item, index) in data" style="float: left;margin-right: 15px;margin-top: 15px">
                        <a :href="item.url" target="_blank"><img style="width: 200px;height: 200px" :src="item.url"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="helper">
        <div class="mod">
            <div class="mod-wrap">
                <h4><img src="images/h1.png" width="60" height="60"/><span>新手上路</span></h4>
            </div>
        </div>
        <div class="mod">
            <div class="mod-wrap">
                <h4><img src="images/h2.png" width="60" height="60"/><span>如何支付</span></h4>
            </div>
        </div>
        <div class="mod">
            <div class="mod-wrap">
                <h4><img src="images/h3.png" width="60" height="60"/><span>配送运输</span></h4>
            </div>
        </div>
        <div class="mod mod-last">
            <div class="mod-wrap">
                <h4><img src="images/h4.png" width="60" height="60"/><span>售后服务</span></h4>
            </div>
        </div>
        <div class="mod mod-last">
            <div class="mod-wrap">
                <h4><img src="images/h5.png" width="60" height="60"/><span>联系我们</span></h4>
            </div>
        </div>
    </div>

</div>

<div class="clear">&nbsp;</div>


<div class="footerpage"></div>


<!--弹出层时背景层DIV-->

<!--商品添加成功DIV-->
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content">
    <div style="width:385px; height:30px; background:#1ba67f; padding-left:15px; color:#fff; line-height:30px; font-size:14px;"> <span
            onclick="CloseDiv('MyDiv','fade')">
        <input type="button" class="addbtn">
        </span>商品加入货仓
    </div>
    <div class="dialogbox">
        <p>商品添加成功！</p>
    </div>
</div>
</div>

<!--商品收藏成功DIV-->
<div id="fade2" class="black_overlay"></div>
<div id="MyDiv2" class="white_content">
    <div style="width:385px; height:30px; background:#1ba67f; padding-left:15px; color:#fff; line-height:30px; font-size:14px;"> <span
            onclick="CloseDiv('MyDiv2','fade2')">
        <input type="button" class="addbtn">
        </span>商品收藏
    </div>
    <div class="dialogbox">
        <p>商品收藏成功！</p>
    </div>
</div>
</div>

<script type="text/javascript">
    $(function () {
        $("#h1").toggle(function () {
            $("#h1").css("background-image", "url('images/iconfont-xingxingman_add.png')");
        }, function () {
            $("#h1").css("background-image", "url('images/iconfont-xingxingman_add.png') ");
        })
    })

</script>

<script>
    $(function () {
        $(".pro_tab li").each(function (i) {
            $(this).click(function () {
                $(this).addClass("cur").siblings().removeClass("cur");
                $(".conlist .conbox").eq(i).show().siblings().hide();
            })
        })
    })

    //收藏店铺
    function collect(e) {
        var id = $(e).attr('id')
        getToken(function (token) {
            ajax('/enterprise/collect/','POST',{enterpriseId:id},token,function (data) {
                alert('收藏成功')
            })
        })
    }
</script>

<script>
    $(function () {
        $(".footerpage").load("footer.html");
    });
</script>

<script>
    var fileUrl='';
    var data_details = {data:{}, contactModalVisibility: false, contact: {name: '姓名', cellphone: 'XXXXXXXXXXX'}};
    var vueDish = new Vue({
        el: '#Details',
        data: data_details,
        methods: {
            callMe() {
                const self = this
                this.$prompt(`当前操作需要消耗${this.data.fee}张券，是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    getToken(function (token) {
                        ajax(`/information/contact?id=${self.data.id}`, 'GET', '', token, function (data) {
                            this.contactModalVisibility = true
                            this.contact = data.data
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            handleClose(done) {
                done()
            }
        }
    });

    var data_dish = {data:[]};
    var vueDishList = new Vue({
        el: '#dishList',
        data: data_dish
    });
    var data_images = {data:[]};
    var vueImagesList = new Vue({
        el: '#thumblist',
        data: data_images
    });

    var id = getUrlParam('id')
    //详情
    getToken(function (token) {
        ajax(`/information/${id}`,'GET','',token,function (data) {
            data.data.beginAt = timestampToTime(data.data.beginAt)
            data.data.endAt = timestampToTime(data.data.endAt)
            if(data.data.refreshAt > 0){
                data.data.refreshAt = timestampToTime(data.data.refreshAt)
            }else{
                data.data.refreshAt = '无'
            }

            data_details.data = data.data
            $('.product_body').text(data.data.enterpriseName)
            fileUrl = data.data.fileUrl
        })
    })

    //拼盘详情
    getToken(function (token) {
        ajax(`/together/list/${id}`,'GET','',token,function (data) {
            data_dish.data = data.data
        })
    })

    //图片清单
    getToken(function (token) {
        ajax(`/gallery/0/${id}`,'GET','',token,function (data) {
            data_images.data = data.data
        })
    })

    function downloadFile(){
        if(fileUrl==''){
            alert('暂无附件')
            return
        }
        window.open(fileUrl)
    }


</script>

<script type="text/javascript">
    $(document).ready(function () {

        $(".jqzoom").imagezoom();

        $("#thumblist li a").mousemove(function () {
            $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
            $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
            $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
        });

    });
</script>
</body>
</html>
